import { onMounted, watch, ref } from "../vue.esm-browser.js";

const html = String.raw;

export default {
  props: ["title", "visible"],
  emits: ["confirm", "cancel"],
  setup(props) {
    const modalNode = ref(null);

    // 显示对话框
    let myModal = null;
    onMounted(() => {
      myModal = new bootstrap.Modal(modalNode.value, {
        backdrop: "static",
        keyboard: false,
      });
      // 可见
      if (props.visible) myModal.show();
      else myModal.hide();
    });
    watch(
      () => props.visible,
      () => {
        if (props.visible) myModal.show();
        else myModal.hide();
      },
      {
        flush: "post",
      }
    );
    return {
      modalNode,
    };
  },
  template: html`
    <div class="modal fade" ref="modalNode">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <h1 class="modal-title fs-5">{{title}}</h1>
          </div>
          <div class="modal-body p-4">
            <slot></slot>
          </div>
          <div class="modal-footer">
            <bs-button
              type="primary"
              icon="floppy-disk"
              @click="$emit('confirm')"
              >确定</bs-button
            >
            <bs-button type="secondary" icon="ban" @click="$emit('cancel')"
              >取消</bs-button
            >
          </div>
        </div>
      </div>
    </div>
  `,
};
